<template>
  <view>
    <my-search @click="gotoSearch"></my-search>
    <view class="scroll_view">
      <scroll-view class="left" scroll-y :style="{'height':windowHeight+'px'}">
        <block v-for="(item,index) in cateList" :key="item.cat_id">
          <view :class="['left_item',index===active?'active':'']" @click="changeActive(index)">{{item.cat_name}}</view>
        </block>

      </scroll-view>
      <scroll-view class="right" scroll-y :style="{'height':windowHeight+'px'}" :scroll-top="scrollTop">
        <view class="right_item" v-for="(item,index) in cateLevel2" :key="item.cat_id">
          <view class="right_item_title">/ {{item.cat_name}} /</view>
          <view class="right_item_children">
            <view class="right_level3" v-for="(item2,index2) in item.children" :key="item2.cat_id"
              @click="gotoGoodsList(item2)">
              <image :src="item2.cat_icon.replace('dev','web')" mode="widthFix"></image>
              <view>{{item2.cat_name}}</view>
            </view>
          </view>

        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badgeMix],
    data() {
      return {
        //当前设备可用高度
        windowHeight: 0,
        //一级分类
        cateList: [],
        //二级分类
        cateLevel2: [],

        //右侧滑动区域滚动条距离顶部的位置
        scrollTop: 0,

        //选中的一级分类
        active: 0
      }
    },
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      this.windowHeight = sysInfo.windowHeight - 50
      this.getCateList()
    },
    methods: {
      async getCateList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        if (res.meta.status !== 200) {
          return uni.$showMsg();
        }
        this.cateList = res.message;
        this.cateLevel2 = this.cateList[0].children;
      },
      changeActive(index) {
        this.active = index;
        this.cateLevel2 = this.cateList[index].children;
        this.scrollTop = 1 - this.scrollTop;
      },
      gotoGoodsList(item) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
        })
      },
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .scroll_view {
    display: flex;

    .left {
      width: 240rpx;

      .left_item {
        line-height: 120rpx;
        text-align: center;
        font-size: 36rpx;
        background-color: #f7f7f7;

        // 表示同时拥有left 和 active类名的元素
        &.active {
          background-color: #fff;
          position: relative;

          &::before {
            content: " ";
            display: block;
            position: absolute;
            height: 50%;
            width: 3px;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            background-color: #c00000;
          }
        }

      }



    }

    .right {
      background-color: #fff;

      .right_item {
        display: flex;
        flex-direction: column;

        .right_item_title {
          font-size: 36rpx;
          font-weight: bold;
          text-align: center;
          padding: 30rpx 0;
        }


        .right_item_children {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;

          .right_level3 {
            width: 33.33%;
            text-align: center;
            margin-bottom: 20rpx;

            image {
              width: 120rpx;
              height: 120rpx;
            }
          }
        }
      }
    }
  }
</style>
